{% extends "custom_admin/base.html" %}

{% block title %}
{% if article %}编辑文章{% else %}创建文章{% endif %}
{% endblock %}

{% block extra_css %}
<!-- UEditor CSS -->
<link rel="stylesheet" href="/static/ueditor/themes/default/css/ueditor.css">
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">{% if article %}编辑文章{% else %}创建文章{% endif %}</h1>
</div>

<div class="row">
    <div class="col-md-8">
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            
            <div class="mb-3">
                <label for="{{ form.title.id_for_label }}" class="form-label">标题</label>
                {{ form.title }}
                {% if form.title.errors %}
                <div class="text-danger">{{ form.title.errors }}</div>
                {% endif %}
            </div>
            
            <div class="mb-3">
                <label for="{{ form.content.id_for_label }}" class="form-label">内容</label>
                {{ form.content }}
                {% if form.content.errors %}
                <div class="text-danger">{{ form.content.errors }}</div>
                {% endif %}
            </div>
            
            <div class="mb-3">
                <label class="form-label">分类</label>
                <div>
                    {{ form.categories }}
                </div>
                {% if form.categories.errors %}
                <div class="text-danger">{{ form.categories.errors }}</div>
                {% endif %}
            </div>
            
            <div class="mb-3 form-check">
                {{ form.published }}
                <label for="{{ form.published.id_for_label }}" class="form-check-label">发布</label>
                {% if form.published.errors %}
                <div class="text-danger">{{ form.published.errors }}</div>
                {% endif %}
            </div>
            
            <div class="mb-3">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save me-1"></i>
                    {% if article %}更新{% else %}创建{% endif %}文章
                </button>
                <a href="{% url 'custom_admin:article_list' %}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-1"></i>返回列表
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- UEditor JS -->
<script src="/static/ueditor/ueditor.config.js"></script>
<script src="/static/ueditor/ueditor.all.min.js"></script>
<script>
// 配置UEditor的资源路径
window.UEDITOR_HOME_URL = "/static/ueditor/";

document.addEventListener('DOMContentLoaded', function() {
    // 确保UE对象存在后再初始化
    if (typeof UE !== 'undefined') {
        // 初始化UEditor
        var ue = UE.getEditor('id_content', {
            UEDITOR_HOME_URL: "/static/ueditor/",
            serverUrl: "{% url 'custom_admin:ueditor_handler' %}",
            initialFrameHeight: 500,
            maximumWords: 100000,
            toolbars: [
                [
                    'fullscreen', 'source', '|',
                    'undo', 'redo', '|',
                    'bold', 'italic', 'underline', 'strikethrough', '|',
                    'forecolor', 'backcolor', '|',
                    'fontsize', 'fontfamily', '|',
                    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
                    'insertorderedlist', 'insertunorderedlist', '|',
                    'link', 'unlink', '|',
                    'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                    'insertimage', 'insertvideo', 'attachment', '|',
                    'horizontal', 'date', 'time', '|',
                    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|',
                    'preview', 'searchreplace', 'help'
                ]
            ]
        });
    } else {
        console.error('UEditor未能正确加载');
    }
});
</script>
{% endblock %}